<template>
  <f7-page>
    <f7-navbar title="添加线路" back-link="返回">
    </f7-navbar>
    <f7-list contacts>
      <f7-list-group>
        <!-- <f7-list-item title="起始地： " group-title></f7-list-item>-->
        <f7-icon f7="home " size="24px " color="green " class="icons "></f7-icon>
        <f7-list-item :title="startAddsStr " @click="delogAdd( 'start') ">
          <f7-icon f7="chevron_right " color="gray "></f7-icon>
        </f7-list-item>
        <f7-icon f7="home " size="24px " color="orange " class="icons "></f7-icon>
        <f7-list-item :title="endAddsStr " @click="delogAdd( 'end') ">
          <f7-icon f7="chevron_right " color="gray "></f7-icon>
        </f7-list-item>
      </f7-list-group>
    </f7-list>

    <f7-list form>
      <!-- <f7-list-item title="线路报价 " group-title></f7-list-item>-->
      <f7-list-item>
        <div class="item-title label ">去程报价(元/吨)</div>
        <div class="item-input ">
          <input type="text " placeholder="请输入 " v-model="money " class="Please_enter ">
        </div>
      </f7-list-item>
      <f7-list-item>
        <div class="item-title label ">回程报价(元/吨)</div>
        <div class="item-input ">
          <input type="text " placeholder="请输入 " v-model="unmoney " class="Please_enter ">
        </div>
      </f7-list-item>
    </f7-list>

    <div class="list-inset ">
      <h4 class="text-black1 ">线路运输货物</h4>
      <div class="bg-white">
        <div class="reg-radio reg-radio1 row" v-for="(item,index) in product " @click="productClick(item,index)">
          <div class="col col-50" >
            <label class="checkbox Check_box">
              <input  type="checkbox"  :value="item.eng" name="product"  :checked='item.checked'>
              <i class="icon-checkbox"></i>
            </label>
            {{item.chn}}
          </div>
        </div>
      </div>

    </div>

    <div class="bg-white ">
      <f7-list form>
        <f7-list-item>
          <input class="text-gray1 " rows="3 " maxlength="200 " type="textarea " placeholder="该线路的备注说明... "/>
        </f7-list-item>
      </f7-list>
    </div>

    <f7-block>
      <f7-button @click="save() ">立即发布线路</f7-button>
    </f7-block>
    <addSelect ref="addSelect" @addsDone="addsDoneEmit "></addSelect>
  </f7-page>
</template>

<script>
import addSelect from '../../components/addSelect.vue'
export default {
  name: 'add',
  components: { addSelect },
  data () {
    return {
      money: '',
      unmoney: '',
      addType: '',
      startAdds: null,
      startAddsStr: '出发地：',
      endAdds: null,
      endAddsStr: '到达地：',
      product: [],
      selcetProduct: []
    }
  },
  methods: {
    delogAdd (type) {
      this.addType = type
      this.$refs.addSelect.openPop()
    },
    addsDoneEmit (data) {
      let addsStr = `${data.province[0]} ${data.city} ${data.district}`
      if (this.addType === 'start') {
        this.startAddsStr = addsStr
        this.startAdds = {
          start_province: data.province,
          start_city: data.city,
          start_district: data.district
        }
      } else {
        this.endAddsStr = addsStr
        this.endAdds = {
          end_province: data.province,
          end_city: data.city,
          end_district: data.district
        }
      }
    },
    setSelcetProduct () {
      this.selcetProduct = []
      this.product.forEach((item) => {
        if (item.checked) {
          this.selcetProduct.push(item.eng)
        }
      })
    },
    productClick (item, index) {
      item.checked = !item.checked
      this.$set(this.product, index, item)
      this.setSelcetProduct()
    },
    async save () {
      let param = {
        money: this.money,
        unmoney: this.unmoney,
        cargo: this.selcetProduct
      }
      Object.assign(param, this.startAdds, this.endAdds)
      let addPassLineRep = (await this.LineService.addPassLine(param)).data
      if (addPassLineRep.status === 'success') {
        this.$f7.router.navigate({ url: '/lines/' })
      } else {
        alert(addPassLineRep.msg)
      }
    }
  },
  async mounted () {
    let getProductTypeRep = (await this.ProductService.getProductType({ type: 'registered' })).data
    getProductTypeRep.data.forEach(function (item) {
      item.checked = false
    })
    getProductTypeRep.data[getProductTypeRep.data.length - 1].checked = true
    this.product = getProductTypeRep.data
    this.setSelcetProduct()
  }
}
</script>

<style scoped>
.ios .navbar .right {
  margin-left: 10px;
  color: #fff;
  font-size: 14px;
}

.ios .navbar a.link {
  color: #fff;
  font-size: 14px;
}

.Back {
  color: #fff;
  font-size: 16px;
  margin-left: 4px;
}

.ios .list {
  margin: 20px 0;
  font-size: 17px;
}

.icons {
  margin-top: 7px;
  float: left;
  margin-left: 15px;
}

.ios .icon.color-gray {
  color: #8e8e93;
  font-size: 10px;
}

.Please_enter {
  height: 44px;
  color: #333;
  font-size: 14px;
  text-align: right;
}

.ios .list-group-title {
  margin-top: -1px;
  padding: 4px 15px;
  background: #ffffff;
  color: #333;
  font-size: 14px;
}

.ios .block {
  position: fixed;
  margin: 0px;
  padding: 0px;
  bottom: 0;
  width: 100%;
}

.ios .button {
  background: #9898e7;
  color: #fff;
  line-height: 40px;
  height: 40px;
  border: none;
  border-radius: 0px;
}

.ios .list input[type='text'] {
  height: 44px;
  color: #000;
  font-size: 12px;
}

.list-inset {
  background: #fff;
  padding: 0 15px;
}

.text-black1 {
  font-size: 14px;
  color: #333;
  font-weight: 400;
  padding-top: 10px;
  margin: 0;
  line-height: 1.2;
}

.row {
  padding: 8px 0;
}

.col-50 {
  padding: 5px 0;
}

.row + .row {
  margin-top: -5px;
  padding-top: 0;
}

.bg-white {
  background: #fff;
  margin-top: 20px;
}
  input{
    border:none;
  }
</style>
